<template>
    <div ref="chartRef" id="id" class="className" :style="{ width: width, height: height }"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, watch } from "vue"
import * as echarts from 'echarts'
import type { ECharts } from 'echarts'


const props = defineProps({
    id: String,
    width: {
        type: String,
        require: true,
    },
    height: {
        type: String,
        require: true,
    },
    className: {
        type: String,
        default: 'chart'
    },
    options: {
        type: Object,
        default: () => ({})
    }
})

const chartRef = ref<HTMLElement>()
//echarts图表对象
const myChart = reactive<{ chart: ECharts }>({
    chart: {} as ECharts
})


//只加载一次
onMounted(() => {
    initChart()
})

//初始化图表
const initChart = () => {
    myChart.chart = echarts.init(chartRef.value)
    myChart.chart.setOption(props.options)
}

watch(() => props.options, (val) => {
    val && initChart()
})


</script>

<style scoped></style>